/*回到顶部CSS*/
#hddb {
   width:40px;
   height:40px;
   background:url(/images/common/totop.png) no-repeat left top;
   background-size:100% 100%;
   position: fixed;
   right:10px;
   bottom:50px;
   display:none;
   cursor: pointer;
   z-index:100;
}
// side
.side{
    width:250px;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:#252736 url(//cdn.seosiwei.com/fbpXxGM2EpnGtRXj6yT5w8YhABzpDDM3.png);
    color:#8e8e8e;
    z-index: 10002;
    a{color:#8e8e8e;}
    .iconfont,a.iconfont{
        color:#7f7f7f;
    }
    .top{
        background-size:100% auto;
        text-align:center;
        .logo{
            width:1.2rem;
            height:1.2rem;
            border-radius:50%;
            display:inline-block;
            overflow:hidden;
            margin-top:.4rem;
            img{
                width:100%;
                height:100%;
            }
        }
        .name{
            font-size:.18rem;
            margin-top:.13rem;
            margin-bottom:.1rem;
        }
        .text{
            font-size:.14rem;
            color:#676767;
        }
    }
    .nav{
        margin-top:.2rem;
        overflow:hidden;
        &:before{
            content:'';
            height:1px;
            width:100%;
            display:block;
            background:#000;
        }
        &:after{
            content:'';
            height:1px;
            width:100%;
            display:block;
            background:#444;
        }
        li{
            border-top: solid 1px #444;
            border-bottom: solid 1px #000;
            height:.5rem;
            line-height:.5rem;
            font-size:.15rem;
            &.active{
                a{
                    color:#fff;
                    span{
                        color:#cacaca;
                    }
                }
            }
            a{
                display:block;
                width:100%;
                height:100%;
                span{
                    display:inline-block;
                    width:.3rem;
                    height:.3rem;
                    margin-left:.5rem;
                    float:left;
                    margin-right:.2rem;
                    font-size:.18rem;
                }
            }

        }
    }
    .icons{
        position:absolute;
        left:0;
        bottom:.5rem;
        width:100%;
        margin-left:.5rem;
        li{
            float:left;
            width:.5rem;
            height:.5rem;
            line-height:.5rem;
            a{
                display:block;
                width:100%;
                height:100%;
                span{
                    font-size:.18rem;
                }
            }
        }
    }
    .fix-top{
        display:none;
        position:fixed;
        left:0;
        top:0;
        overflow:hidden;
        width:100%;
        height:.8rem;
        background:#252736 url(//cdn.seosiwei.com/fbpXxGM2EpnGtRXj6yT5w8YhABzpDDM3.png);
        text-align:center;
        font-size:.3rem;
        line-height:.8rem;
        span{
            display:block;
            width:.8rem;
            height:.8rem;
            position:absolute;
            left:0;
            top:0;
            line-height:.8rem;
            text-align:center;
            font-size:.4rem;
        }
        img{
            display:block;
            width:.6rem;
            height:.6rem;
            position:absolute;
            right:.1rem;
            top:0;
            border-radius:100%;
            margin-top:.1rem;
        }
    }
}
.main{
   margin-left:250px;
   padding:0 .2rem;
   max-width:1200px;
   padding-left:.3rem;
}
.footer{
    margin:0 .2rem;
    font-size:.14rem;
    line-height:.25rem;
    padding:.2rem 0;
    text-align:center;
    color:#afadad;
    margin-top:.5rem;
    a{color:#afadad;}
}
.btn {
   display: inline-block;
   padding:8px 10px;
   text-align: center;
   line-height: 22px;
   min-width: 60px;
   font-size: 14px;
   color:#fff;
   border-radius:2px;
   cursor: pointer;
   position:relative;
    &.btn-default{
        border:solid 1px #ddd;
        color:#333;
        background:#fff;
        font-size:15px;
    }
    &.btn-main{
        border:solid 1px #3497DB;
        color:#fff;
        background:#3497DB;
    }
   span {
      position:relative;
      z-index: 999; 
   }
   &:after {
      content:'';
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      position:absolute;
      transition: all .3s ease;
   }
   &:hover {
      span {
         color: #fff!important;
      }
      &:after {
         width: 100%;
      }
   }
}
.btn-detail {
   border:1px solid #e9807b;
   color: #e9807b;
   a{
      color: #e9807b;
   }
   &:hover {
      &:after {
         background:#e9807b;
      }
   }
}
.btn-edit {
   border:1px solid #44a5de;
   color: #44a5de;
   &:hover {
      &:after {
         background:#44a5de;
      }
   }
}
.btn-down {
   border:1px solid #dea844;
   color: #dea844;
   &:hover {
      &:after {
         background:#dea844;
      }
   }
}
.btn-up {
   border:1px solid #67d675;
   color: #67d675;
   &:hover {
      &:after {
         background:#67d675;
      }
   }
}
.h1{
    font-size:18px;
    margin-bottom:.15rem;
}

#editor,#describes{
    .w-e-text{
        h1{font-size:.22rem;}
        h2{font-size:.2rem;}
        h3{font-size:.18rem;}
        h4{font-size:.16rem;}
        h5{font-size:.14rem;}
        ol{
           li{
                list-style:decimal;
            } 
        }
        ul{
            li{
                list-style:disc;
            }
        }
    }
}

@media (max-width: 768px) {
    // 小屏幕
    .side{
        margin-left:-250px;
        transition: width .5s;
        .top{
            .logo{
                width:2rem;
                height:2rem;
                margin-top:.4rem;
            }
            .name{
                font-size:.25rem;
                margin-top:.2rem;
            }
            .text{
                font-size:.18rem;
            }
        }
        .nav{
            margin-top:.2rem;
            li{
                height:1rem;
                line-height:1rem;
                font-size:.25rem;
                a{
                    span{
                        width:.3rem;
                        height:.3rem;
                        margin-left:1rem;
                        margin-right:.3rem;
                        font-size:.3rem;
                    }
                }

            }
        }
        .icons{
            margin-left:.5rem;
            li{
                width:.8rem;
                height:.8rem;
                line-height:.8rem;
                a{
                    span{
                        font-size:.25rem;
                    }
                }
            }
        }
        .fix-top{
            display:block;
        }
    }
    .main{
       margin-left:0px;
       margin-top:1rem;
       padding-left:.2rem;
    }
    .sideSlideShow{
        animation: sideShowSlide .5s;
        animation-fill-mode: forwards;
    }
    .navSlideShow{
        animation: navShowSlide .5s;
        animation-fill-mode: forwards;
    }
    .sideSlideHide{
        animation: sideHideSlide .5s;
        animation-fill-mode: forwards;
    }
    .navSlideHide{
        animation: navHideSlide .5s;
        animation-fill-mode: forwards;
    }
}


// 动画
@keyframes sideShowSlide{
    from {margin-left: -250px;}
    to {margin-left: 0;}
}
@keyframes sideHideSlide{
    from {margin-left: 0px;}
    to {margin-left: -250px;}
}
@keyframes navShowSlide{
    from {margin-left: 0;}
    to {margin-left: 250px;}
}
@keyframes navHideSlide{
    from {margin-left: 250px;}
    to {margin-left: 0px;}
}



